<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线用户列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <style>
        .online-user-card {
            margin-bottom: 15px;
            border-left: 4px solid #28a745;
        }
        .user-info {
            padding: 15px;
        }
        .user-name {
            font-weight: bold;
            font-size: 1.1em;
        }
        .user-details {
            color: #6c757d;
            font-size: 0.9em;
        }
        .online-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #28a745;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-12">
                <h2>
                    <span class="online-indicator"></span>
                    在线用户列表
                    <small class="text-muted" id="userCount">加载中...</small>
                </h2>
                <hr>
            </div>
        </div>
        
        <div class="row" id="userList">
            <!-- 用户列表将通过JavaScript动态加载 -->
            <div class="col-12 text-center">
                <div class="spinner-border" role="status">
                    <span class="sr-only">加载中...</span>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // API基础路径
        const API_BASE = '/sys/online';
        
        // 获取在线用户列表
        function loadOnlineUsers() {
            $.ajax({
                url: API_BASE + '/list',
                method: 'GET',
                success: function(response) {
                    if (response.code === 0) {
                        displayUsers(response.data);
                    } else {
                        showError('获取在线用户列表失败: ' + response.msg);
                    }
                },
                error: function() {
                    showError('网络错误，无法获取在线用户列表');
                }
            });
        }
        
        // 显示用户列表
        function displayUsers(users) {
            const userList = $('#userList');
            userList.empty();
            
            if (!users || users.length === 0) {
                userList.append(`
                    <div class="col-12 text-center">
                        <p class="text-muted">当前没有在线用户</p>
                    </div>
                `);
                $('#userCount').text('0 人在线');
                return;
            }
            
            // 更新在线用户数量
            $('#userCount').text(users.length + ' 人在线');
            
            // 创建用户卡片
            users.forEach(function(user) {
                const userCard = `
                    <div class="col-md-6 col-lg-4">
                        <div class="card online-user-card">
                            <div class="user-info">
                                <div class="user-name">
                                    <span class="online-indicator"></span>
                                    ${user.realName || user.username}
                                </div>
                                <div class="user-details mt-2">
                                    <div>用户名: ${user.username}</div>
                                    <div>手机号: ${user.mobile || '未设置'}</div>
                                    <div>邮箱: ${user.email || '未设置'}</div>
                                    <div>登录时间: ${formatDate(user.createTime)}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                userList.append(userCard);
            });
        }
        
        // 显示错误信息
        function showError(message) {
            const userList = $('#userList');
            userList.empty();
            userList.append(`
                <div class="col-12">
                    <div class="alert alert-danger" role="alert">
                        ${message}
                    </div>
                </div>
            `);
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '未知';
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }
        
        // 页面加载完成后获取在线用户列表
        $(document).ready(function() {
            loadOnlineUsers();
            
            // 每30秒刷新一次在线用户列表
            setInterval(loadOnlineUsers, 30000);
        });
    </script>
</body>
</html>